<template>
  <div class='container'>
    <el-card>
      <!-- 导航栏 -->
    <el-row>
      <el-col :span="22">
        <el-form  :model="ruleForm"  ref="ruleForm" class="demo-form-inline" :inline="true">
          <el-form-item label="关键字" prop="name" >
            <el-input   v-model="ruleForm.name" style="width:180px !important ;"></el-input>
          </el-form-item>
          <el-form-item label="状态">
              <el-select v-model="requestParams.state ">
                <el-option :value="1" label="启用"></el-option>
                <el-option :value="0" label="禁用"></el-option>
              </el-select>
            </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search()">搜索</el-button>
             <el-button @click="Reset()">清除</el-button>
          </el-form-item>
        </el-form>
       </el-col>
      <el-col :span="2"><el-button type="success" icon="el-icon-edit" @click="add()">新增技巧</el-button></el-col>
    </el-row>
    <!-- 表头 -->
     <el-alert
    :title="`数据一共${total}条`"
    type="info"
    show-icon
    :closable="false">
  </el-alert>
   <!-- 表格  -->
    <el-table :data="formData" style="width: 100%" >
    <el-table-column  label="序号"  type="index" :index="indexMethod"></el-table-column>
    <el-table-column  label="文章标题" >
      <template #default="{row}">
        {{row.title}}
        <a @click.prevent="openVideo(row.videoURL)" v-if="row.videoURL" href=" " class="el-icon-film"></a>
     </template>
    </el-table-column>
    <el-table-column prop="visits" label="阅读数"></el-table-column>
     <el-table-column prop="username" label="录入人"></el-table-column>
      <el-table-column label="录入时间">
         <template #default="{row}">{{row.createTime|parseTimeByString}}</template>
      </el-table-column>
       <el-table-column prop="state" label="状态" :formatter="formatter">
       </el-table-column>
         <el-table-column fixed="right" label="操作" width="300">
      <template #default="{row}">
        <el-button type="text" size="small" @click="previewArticle(row)">预览</el-button>
        <el-button type="text" size="small"  @click="forbidden(row)">{{row.state===1?'禁用':'启用'}}</el-button>
        <el-button type="text" size="small"  @click="eait(row)" :disabled="row.state===1">修改</el-button>
        <el-button type="text" size="small" @click="del(row)" :disabled="row.state===1" >删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    <!-- 预览 -->
    <articles-preview ref="articlesPreview" :data="currArticle"></articles-preview>
    <!-- 视频 -->
    <div class="video-preview" v-if="videoURL">
      <div class="close" @click="closeVideo()"><span class="el-icon-close"></span></div>
      <div class="box">
        <video ref="video" :src="videoURL"></video>
      </div>
    </div>
  <!-- 对话框 -->
  <articles-add :show.sync="show" @reload="reqGetList" :noteData='noteData' ref="articlesAdd"></articles-add>
  <!-- 分页 -->
  <el-pagination
     style="margin-top:20px;text-align:right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="requestParams.page"
      :page-sizes="[5, 10, 20, 40]"
      :page-size="requestParams.pagesize"
      layout=" sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { list, remove as delList, changeState } from '@/api/hmmm/articles.js'
import articlesAdd from '../components/articles-add.vue'
import ArticlesPreview from '../components/articles-preview'
export default {
  components: { articlesAdd, ArticlesPreview },
  data () {
    return {
      noteData: {},
      ruleForm: {
        name: ''
      },
      show: false,
      formData: [],
      requestParams: {
        keyword: null,
        state: null,
        page: 1,
        pagesize: 10
      },
      total: 0, // 总数
      currArticle: {},
      videoURL: null
    }
  },
  created () {
    this.reqGetList()
  },
  methods: {
    // 视频
    openVideo (url) {
      this.videoURL = url
      this.$nextTick(() => {
        this.$refs.video.play()
      })
    },
    closeVideo () {
      this.$refs.video.pause()
      this.videoURL = null
    },
    // 预览
    previewArticle (row) {
      this.currArticle = row
      this.$nextTick(() => {
        this.$refs.articlesPreview.open()
      })
    },
    // 切换状态
    async forbidden (row) {
      console.log(row)
      await changeState({
        id: row.id,
        state: row.state === 1 ? 0 : 1
      })
      this.$message.success('操作成功')
      row.state = row.state === 1 ? 0 : 1
    },
    // 清除关键字输入框
    Reset () {
      this.$refs.ruleForm.resetFields()
      this.requestParams = {
        keyword: null,
        state: null,
        page: 1,
        pagesize: 10
      }
      this.reqGetList()
    },
    // 进行筛选
    search () {
      this.requestParams.page = 1
      this.reqGetList()
    },
    async reqGetList () {
      const res = await list(this.requestParams)
      console.log(res)
      this.formData = res.data.items
      this.total = res.data.counts
    },
    handleSizeChange (val) {
      console.log(val)
      this.requestParams.pagesize = val
      this.reqGetList()
    },
    handleCurrentChange (val) {
      this.requestParams.page = val
      this.reqGetList()
    },
    indexMethod (index) {
      return index + 1 + this.requestParams.pagesize * (this.requestParams.page - 1)
    },
    // // 每页条数发生变化触发的处理函数
    // handleSizeChange (val) {
    //   // 将最新的每页条数赋值给size
    //   console.log(val)
    //   this.requestParams.page = 1
    //   this.requestParams.pagesize = val
    //   // 重新获取
    //   this.reqGetList()
    // },
    // // 页码发生变化触发的处理函数
    // handleCurrentChange (val) {
    //   // 将最新的页码赋值给page
    //   console.log(val)
    //   this.requestParams.page = val
    //   // 重新获取
    //   this.reqGetList()
    // },
    // // 自定义索引列
    // indexMethod (index) {
    //   return index + 1 + (this.requestParams.page - 1) * this.requestParams.pagesize
    // },
    formatter (row) {
      // console.log(row)
      return row.state === 1 ? '已启用' : '已禁用'
    },
    // 新增 || 编辑 按钮
    add () {
      this.show = !this.show
      console.log(this.$refs.articlesAdd)
      this.$refs.articlesAdd.name = '新增文章'
    },
    eait (row) {
      console.log(row)
      this.show = !this.show
      this.noteData = row
      this.$refs.articlesAdd.name = '编辑文章'
      this.$nextTick(() => {
        this.$refs.articlesAdd.reqSimpleList()
      })
    },
    // 删除按钮
    del (row) {
      console.log(row)
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        if (this.formData.length === 1 && this.requestParams.page > 1) {
          this.requestParams.page--
        }
        const res = await delList(row)
        console.log(res)
        this.$message.success('删除成功!')
        this.reqGetList()
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    }
  }
}
</script>

<style scoped lang='scss'>
.video-preview{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.3);
  overflow: hidden;
  z-index: 9999;
  .close{
    width: 50px;
    height: 50px;
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translate(-50%,0);
    background: rgba(0,0,0,0.4);
    box-shadow: 0 0 5px rgba(0,0,0,0.4);
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
  }
  .box{
    width: 800px;
    height: 600px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    video{
      width: 100%;
      height: 100%;
    }
  }
  }</style>
